<template>
  <div class="xuan_school">
    <div class="header">
      <van-nav-bar
        title="分类运输"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <!--列表--->
    <van-tabs @click="onClick" v-model="active">
      <van-tab v-for="(index,i) in tab_item" :title="index.name" :key="i" >

        <!-- 此处遍历数据-->
        <div id="list-content">
          <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <van-list
              v-model="loading"
              :finished="finished"
              @load="onLoad"
              finished-text="没有更多了"
              :immediate-check="immediate"
              :offset="10"
            >
              <!-- 分类运输 -->
              <div class="clollect_list quxiao" v-show="show_0" v-for="(item,i) in items" >
                <div class="coll_content">
                  <p style="font-family:PingFang SC; font-weight:400; color:rgba(51,51,51,1);">
                    {{item.garbage_type}}垃圾：{{item.garbage_count}} {{item.unit}}
                  </p>
                  <div class="collect_listcontent">
                    <p>收集单位：{{item.collect_name}}</p>
                    <p>
                      <van-button plain type="primary"
                                  style="color: #fff;background: #4C9FFD;border:#4C9FFD;"
                                  @click="accomplish(item.aId,i)"
                                  class="normal_btn"
                                  >同意</van-button>
                      <van-button plain type="primary"
                                  @click="reject(item.aId,i)"
                                  class="normal_btn"
                      >拒绝</van-button>

                    </p>
                  </div>

                  <div>
                    <p>
                        <span style="font-family:PingFang SC;
                                      font-weight:400;
                                      font-size: 12px;
                                      margin-right: 3vh;
                                      color:rgba(153,153,153,1)">
                          {{item.update_date | formatDate}}
                        </span>
                        <van-icon name="passed" color="#FD9F4C"/>
                      <span style="color: #FD9F4C;vertical-align: middle;font-size: 13px;display: inline-block;margin-top: 0.1vh;">
                        {{item.order_code | formatStatus}}
                      </span>
                    </p>
                  </div>

                </div>
              </div>

              <!-- 收集成功 待处理 -->
              <div class="clollect_list quxiao" v-show="show_1"
                   v-for="(item,j) in daichuli_arr" :key="j" >
                <div class="coll_content">

                  <p style="font-family:PingFang SC; font-weight:400; color:rgba(51,51,51,1);">
                    {{item.garbage_type}}垃圾：{{item.garbage_count}} {{item.unit}}
                  </p>
                  <div class="collect_listcontent">
                    <p>收集单位：{{item.collect_name}}</p>
                    <p>
                      <van-button plain type="primary"
                                  style="color: #fff;background: #4C9FFD;border:#4C9FFD;"
                                  class="normal_btn"
                      >下载凭证
                      </van-button>
                      <input
                        id="color-input-orange"
                        style="width:20px;height:20px;"
                        class="Iput_check_box chat-button-location-radio-input"
                        name="color-input-red"
                        :value="item"
                        v-model="checkVal"
                        type="checkbox"/>
                    </p>
                  </div>

                  <div>
                    <p>
                        <span style="font-family:PingFang SC;
                                      font-weight:400;
                                      font-size: 12px;
                                      margin-right: 3vh;
                                      color:rgba(153,153,153,1)">

                          {{item.update_date | formatDate}}
                        </span>
                      <van-icon name="underway-o" color="#44F8C3"/>
                      <span style="color: #44F8C3;vertical-align: middle;font-size: 13px;display: inline-block;margin-top: 0.1vh;">
                        收集成功
                      </span>
                    </p>
                  </div>

                </div>



              </div>
              <!-- 已处理 -->
              <div class="clollect_list quxiao" v-show="show_2"
                   v-for="(item,index) in yichuli_arr" :key=index >
                <div class="coll_content">

                  <p style="font-family:PingFang SC; font-weight:400; color:rgba(51,51,51,1);">
                    {{item.name}}垃圾：{{item.garbage_count}} {{item.unit}}
                  </p>
                  <div class="collect_listcontent collect_quan">
                    <p>处理公司：{{item.dispose}}</p>
                    <p v-if="item.order_code == 2?true:false">
                      <van-button plain type="primary"
                                  class="normal_btn"
                                  @click="cancel_chuli(item.aId)"
                      >取消处理
                      </van-button>
                    </p>
                    <p v-if="item.order_code == 0?true:false">
                      <van-button plain type="primary"
                                  class="red_btn"
                          @click="agree_update(item.aId)"
                      >同意更改
                      </van-button>

                      <van-button plain type="primary"
                                  class="normal_btn"
                                  @click="cancel_chuli(item.aId)"
                      >取消处理
                      </van-button>
                    </p>
                    <p v-if="item.order_code == 1?true:false">
                      <van-button  class="blue_btn">
                        下载凭证
                      </van-button>
                    </p>
                  </div>

                  <div>
                    <p>
                        <span style="font-family:PingFang SC;
                                      font-weight:400;
                                      font-size: 12px;
                                      margin-right: 3vh;
                                      color:rgba(153,153,153,1)">
                          {{item.update_date | formatDate}}
                        </span>

                      <span v-if="item.order_code == 2?true:false" :class="{'state_c_yellow':item.order_code ==2}"><van-icon name="underway-o" />
                                {{item.order_code | formatStatus}}
                              </span>
                      <span v-if="item.order_code == 0?true:false" :class="{'state_c_red':item.order_code ==0}"><van-icon name="close" />
                                {{item.order_code | formatStatus}}
                              </span>
                      <span v-if="item.order_code == 1?true:false" :class="{'state_c_green':item.order_code ==1}"><van-icon name="passed" />
                                {{item.order_code | formatStatus}}
                              </span>
                    </p>
                  </div>

                </div>



              </div>



            </van-list>

          </van-pull-refresh>

          <!--button -->
          <!-- <van-button type="default" v-show="show_1"
                      class="normal_btn oppo_btn"
                      @click="to_chu_li"
          >去处理
          </van-button> -->
          <button
          style="width:80vw; height:6.5vh; background:#4C9FFD; color:#fff;border:none; font-size:0.89rem; border-radius: 0.3vh;"
          v-show="show_1 && daichuli_arr.length!==0"
          @click="to_chu_li"
          >去处理</button>

        </div>
      </van-tab>
    </van-tabs>

    <van-dialog
      v-model="show_reson"
      title="请填写拒绝原因"
      show-cancel-button
      @confirm="sure_rej"
    >
      <van-cell-group>
        <van-field
          v-model="reson"
          rows="1"
          autosize
          type="textarea"
          placeholder="请认真填写拒绝原因，会以消息形式发送给对方"
        />
      </van-cell-group>
    </van-dialog>

  </div>



</template>
<script>
    import {formatDate} from '../../utils/filters.js'
    // require styles
    //import BanVeriFy from '@/components/BanVeriFy';
    import { Dialog } from 'vant';
    export default {
        data(){
            return{
                active:0,
                user:'',
                tab_item:[{'name':'分类运输'},{'name':'待处理'},{'name':'已处理'}],

                show_0:true,
                show_1:false,
                show_2:false,
                items:[],
                daichuli_arr:[],
                items2:[],
                yichuli_arr:[],
                page:0,
                isLoading:false,
                loading: false,   //是否处于加载状态
                finished: false, //是否已加载完所有数据
                immediate:false,
                show_reson:false,
                reson:'',
                aId:'',
                checkVal:[]



            }
        },
        mounted(){
            const that = this;
            let local_user = localStorage.getItem('user');
            if(local_user != undefined && local_user != "undefined"){
                let user = JSON.parse(local_user);
                that.user = user;
                that.getawait_cpllect_order(0);
            }else{
                Dialog.confirm({
								    title: '',
								    message: '请您先进行登录'
								}).then(() => {
								    // on confirm
								    that.$router.push({
								        path:'/'
								    })
								}).catch(() => {
								    // on cancel
								});
                return false;
            }
            let is_active = that.$route.query.active;
            if(is_active ==1){
                that.show_0 = false;
                that.show_1 = true;
                that.show_2 = false;
                that.daichuli_arr=[];
                that.active = 1;
                that.getaccomplish_cpllect_order(0);
            }

        },
        filters:{
            formatStatuscon(status,val){

                if(status==val ){
                    return true;
                }else{
                    return false;
                }
            },
            formatDate(time){
                var data = new Date(time);
                return formatDate(data,'yyyy-MM-dd');
            },
            formatStatus(status){
                if(status=='0' ){
                    return "拒绝处理"
                }else if(status=='1'){
                    return "完成处理"
                }else if(status=='2'){
                    return "等待中"
                }
                return "";
            }



        },
        methods: {
            agree_update(aId){
                const that = this;
                Dialog.confirm({
                    title: '',
                    message: '您确定同意更改吗?'
                }).then(() => {
                    that.$sendRequest('/transport_order/update_consent_tramsport_order',"aId="+aId).then(function(res){
                        if(res.data.code ==0){
                            that.show_0 = false;
                            that.show_1 = false;
                            that.show_2 = true;
                            that.yichuli_arr = [];
                            that.active = 2;
                            that.get_tranportOrder(0);
                        }

                    })
                }).catch(() => {

                });
            },
            to_chu_li(){
              console.log(this.checkVal);
              var p ={};
              p.transportUserId=this.user.userId;
              var collectOrderArray=[];
              for(var i = 0;i<this.checkVal.length;i++){
                  let obj = {};
                  obj.aId = this.checkVal[i].aId;
                  obj.garbageCount = this.checkVal[i].garbage_count;
                  obj.garbageType = this.checkVal[i].garbage_value;
                  obj.unit = this.checkVal[i].unit;
                  collectOrderArray.push(obj);
              }
              p.collectOrderArray = collectOrderArray;
              console.log(p);
                const that = this;
                that.$sendRequest('/transport_order/getaccomplish_collect_order',"data="+JSON.stringify(p)).then(function(res){
                    console.log(res.data);
                    if(res.data.code ==0){
                        that.$router.push({
                            path:'/transportfour',query:{re_data:JSON.stringify(res.data.result)}
                        })
                    }else{
                        that.$toast(res.data.msg);
                    }

                })


            },
            cancel_chuli(aId){
                const that = this;
                Dialog.confirm({
                    title: '',
                    message: '您确定取消处理吗?'
                }).then(() => {
                    that.$sendRequest('/transport_order/update_cancel_tramsport_order',"aId="+aId).then(function(res){
                        if(res.data.code ==0){
                            that.show_0 = false;
                            that.show_1 = false;
                            that.show_2 = true;
                            that.yichuli_arr = [];
                            that.active = 2;
                            that.get_tranportOrder(0);
                        }

                    })
                }).catch(() => {

                });




            },
            onClick(event) {
                if(event == 0){
                    const  that = this;
                    that.show_0 = true;
                    that.show_1 = false;
                    that.show_2 = false;
                    that.active = 0;
                    that.items=[];
                    //分类运输
                    that.getawait_cpllect_order(0);
                }else if(event == 1){
                    const  that = this;

                    that.show_0 = false;
                    that.show_1 = true;
                    that.show_2 = false;
                    that.daichuli_arr=[];
                    that.active = 1;
                    //待处理订单
                    that.getaccomplish_cpllect_order(0);
                    console.log(that.daichuli_arr.length)
                }else if(event == 2){

                    const  that = this;

                    that.show_0 = false;
                    that.show_1 = false;
                    that.show_2 = true;
                    that.yichuli_arr = [];
                    that.active = 2;
                    that.get_tranportOrder(0);
                }

            },
            onRefresh(){
                console.log("下拉刷新");
                const  that = this;
                that.isLoading = true;
                that.page = 0;

                if(this.active == 0){
                    that.items=[];
                    this.getawait_cpllect_order(0);
                }else if(this.active == 1){
                    that.daichuli_arr=[];
                    this.getaccomplish_cpllect_order(0);
                }else if(this.active == 2){
                    that.yichuli_arr=[];
                    this.get_tranportOrder(1);
                }


            },
            onLoad() {
                console.log("上拉加载");
                console.log(this.finished);
                if(this.items.length != 0){
                    this.page = this.page+1;
                }
                if(this.active == 0){
                    this.getawait_cpllect_order(1);
                }else if(this.active == 1){
                    this.getaccomplish_cpllect_order(1);
                }else if(this.active == 2){
                    this.get_tranportOrder(1);
                }

            },
            onClickLeft() {
                this.$router.push({
                    path:'/banner'
                })
            },
            getawait_cpllect_order(type){
                const that = this;
                let p = "userId="+that.user.userId+"&page="+that.page;
                console.log(p);
                that.$sendRequest('/collect_order/getawait_cpllect_order',p).then(function(res){
                    console.log(res.data);
                    that.isLoading = false;
                    that.loading = false;
                    if(res.data.code ==0){
                        if(res.data.result.collectorders.length < 10){
                            that.finished = true;
                        }
                        for(var i = 0;i<res.data.result.collectorders.length;i++){
                            that.items.push(res.data.result.collectorders[i]);
                        }
                        if(type ==0){
                            that.finished = false;
                        }
                    }

                })
            },
            getaccomplish_cpllect_order(type){
                const that = this;
                console.log(type)

                let p = "userId="+that.user.userId+"&page="+that.page;
                console.log(p);

                that.$sendRequest('/collect_order/getaccomplish_cpllect_order',p).then(function(res){
                    console.log(res.data);

                    that.isLoading = false;
                    that.loading = false;
                    console.log(res.data.code == 0)

                    if(res.data.code == 0 ){

                        if(res.data.result.collectorders.length < 10){
                            that.finished = true;
                        }

                        const len = res.data.result.collectorders.length;

                        for(var j = 0;j<len;j++){
                            that.daichuli_arr.push(res.data.result.collectorders[j]);
                        }
                        if(type ==0){
                            that.finished = false;
                        }
                        console.log("11111111");
                        console.log(that.daichuli_arr);
                    }

                })
            },
            get_tranportOrder(type){
                const that = this;
                console.log(type)
                let p = "userId="+that.user.userId+"&page="+that.page;
                that.$sendRequest('/transport_order/get_tranportOrder',p).then(function(res){
                    console.log(res.data);
                    that.isLoading = false;
                    that.loading = false;
                    if(res.data.code == 0 ){
                        if(res.data.result.tranportorders.length < 10){
                            that.finished = true;
                        }
                        const len = res.data.result.tranportorders.length;

                        for(var j = 0;j<len;j++){
                            that.yichuli_arr.push(res.data.result.tranportorders[j]);
                        }
                        if(type ==0){
                            that.finished = false;
                        }
                    }

                })
            },
            accomplish(aId){
                //同意
                Dialog.confirm({
                    title: '',
                    message: '您确定同意运输吗?'
                }).then(() => {
                    const that = this;
                    let p = "aId="+aId;
                    console.log(p);
                    that.$sendRequest('/collect_order/accomplish',p).then(function(res){
                        if(res.data.code ==0){
                            //同意后刷新页面
                            that.isLoading = true;
                            that.page = 0;
                            that.items=[];
                            that.getawait_cpllect_order(0);
                        }
                    })


                }).catch(() => {

                });


            },
            reject(aId){
                const that = this;
                that.show_reson = true;
                that.aId = aId;
            },
            sure_rej(){

                const that = this;
                let p ="aId="+that.aId+"&reason="+that.reson;
                that.$sendRequest('/collect_order/reject',p).then(function(res){
                    if(res.data.code ==0){

                        that.show_reson = false;
                        that.reson ='';
                        that.isLoading = true;
                        that.page = 0;
                        that.items=[];
                        that.getawait_cpllect_order(0);
                    }
                })
            }


        }

    }
</script>
<style scoped="scoped">
  .state_c_yellow{
    color: #FD9F4C;vertical-align: middle;font-size: 13px;display: inline-block;margin-top: 0.1vh;
  }
  .state_c_red{
    color: #FF4242;vertical-align: middle;font-size: 13px;display: inline-block;margin-top: 0.1vh;
  }
  .state_c_green{
    color: #44F8C3;vertical-align: middle;font-size: 13px;display: inline-block;margin-top: 0.1vh;
  }
  .xuan_school>>> .van-tabs__content{
    margin: 2vw;

  }
  .normal_btn{
    color: #999999;
    border:1px solid #CCCCCC;
  }

  .clollect_list{
    background: #FFFFFF;
    padding: 2vh;
    text-align: left;
    margin-bottom: 1vh;

  }
  #dayin >>> .van-button--plain{
    color: #FFFFFF;
    background: #4C9FFD;
    border:#4C9FFD;
  }
  .red_btn{
    color: #FFFFFF;
    background: #FF4242;
    border:#FF4242;
  }
  .blue_btn{
    color: #FFFFFF;
    background: #4C9FFD;
    border:#4C9FFD;
  }

  #dayin >>> .van-icon{
    color: #44F8C3;
  }
  .collect_listcontent{
    align-items: center;
    display: flex;
    justify-content: space-between;
  }

  .danwei >>> .van-field__control{
    width: 25%;
    vertical-align: middle;
  }
  .xuan_school >>> .van-icon{

    vertical-align: middle;

  }
  .xuan_school >>> .van-button--large {
    width: 70%;
    height: 50px;
    line-height: 48px;
    margin-top: 4vh;
  }
  .xuan_school>>> .van-tabs__line{
    background-color: #4C9FFD;

  }
  .xuan_school >>> .van-cell{
    padding: 14px 3px !important;
  }
  .xuan_school >>> [class*=van-hairline]::after{
    border-bottom: 0 solid #FFFFFF;
  }
  .Img_sre_contet{
    margin-top: 14vh;
    width: 50%;
    height: 50%;
  }
  .list_header{
    font-family:PingFang SC;
    font-weight:400;
    color:rgba(153,153,153,1);
    line-height:1vh;
    padding: 3vw;
    height: 1vh;
    display: flex;
    font-size: 13px;
    justify-content: space-between;
    border-bottom: 1px solid #F6F6F6;
  }
  .list_bottom{
    display: flex;
    justify-content: space-between;
  }
  .list_bottom div{
    text-align: center;

  }
  .list_bottom div .span_one{
    font-size:13px;
    font-family:PingFang SC;
    font-weight:400;
    color:rgba(51,51,51,1);
  }
  .list_bottom div .span_two{
    margin-top: 1vh;
    display: inline-block;
    font-family:PingFang SC;
    font-weight:400;
    color:rgba(153,153,153,1);
    font-size: 13px;
  }
  .xuan_school .van-list{
    background: #F6F6F6 !important;
  }
  .xuan_school{
    background: #F6F6F6 !important;
  }
  .xuan_school >>> .van-list{
    background: #F6F6F6;
  }
  .list-content{
    margin-top:46px;
    overflow:scroll;
  }
  .list-item{
    text-align:center;
  }
  .child_list_item{
    font-size: 15px;
    vertical-align: middle;
  }
  .lun_bo{
    height: 24vh;
  }
  .header >>> .van-nav-bar__title{
    color: #000;
  }
  .lun_bo >>>.van-swipe{
    height: 100%;
  }
  .data_picker_color{
    color: #FF4242;
    font-size: 20px;
    margin-left: 2vh;
  }
  .child_list_two{
    color: #999999;
    font-size: 13px;
  }
  .uploader_img{
    margin-top: 2vh;
    display: flex;
    justify-content: space-between;
    margin: 12px;
  }
  /*.Assen_action{
    padding: 0;
    margin: 2vh;
    display: flex;
    justify-content: space-between;
  }*/
  .Assen_action{
    padding: 0;
    margin: 1.2vh;
  }
  .Assen_action img{
    width: 28vw;

  }
  .Assen_action .suliao_ping{
    display: flex;
    margin-top: 1.5vh;
    justify-content: space-between;

  }
  p{
    margin: 0;
    padding: 0;
  }
  .Assen_action
  .Assen_action p{
    text-align: center;
    text-align: left;
    margin: 0;
    padding: 0;
    font-size: 12px;
  }

  .div_content_Assen{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .Assen_action .p_content_con{
    font-size: 15px;
    text-align: left;
    /* display: flex;*/
    /*justify-content: space-between;*/
    /*margin-top: 1.1vh;*/
  }
  .Assen_item_one img {
    margin-right: 2vw;
  }
  .p_Assion_july{

    color: #999999;
    margin-top: 0.5vh !important;
  }

  .xuan_school{
    background:rgb(246,246,246);
    height: 100vh;
  }
  .Assen_action{
    /*padding-top: 3vh;*/
    background: #fff;
    /*padding-bottom: 3vh;*/
    padding-left: 2vw;
    padding-right: 2vw;
    border-radius: 1vh;
  }
  .list_bottom{
    padding: 3vh;
  }
  .Door_recy{
    height: 15vh;
    background: #FFFFFF;
    text-align: left;
    margin: 1.5vh;
    border-radius: 1vh;
  }
  .Door_recy_item_one{
    display: flex;
    margin: 2vh;
    height: 5vh;
    line-height: 5vh;
    /*border-bottom: 0.5px solid #999;*/
    justify-content: space-between;
    color: #999999;
    font-size: 13px;
    /*border-bottom: 0.5px solid #CCCCCC;*/
  }

  .end_content{
    display: flex;
    justify-content: space-around;
    font-size: 15px;

  }
  .end_time_content{
    display: flex;
    justify-content: space-between;
    color: #999999;
    margin-left: 2vh;
    margin-right: 2vh;


  }
  .end_time_content div{
    text-align: center;
  }


  p{
    margin: 0;
    padding: 0;
  }

  .time_content_iten_one p:nth-child(1){
    color: #000000;
  }
  .time_content_iten_one p:nth-child(2){
    font-size: 12px;
    margin-top: 1vh;

  }
  #color-input-orange +label{
    display: inline-block;
    width: 15px;
    height: 15px;
    cursor: pointer;

    top: 1px;
    left: 15px;
    border:1px solid #4C9FFD;
    border-radius: 2px;

  }

  #color-input-orange:checked +label::before{
    display: block;
    content: "\2714";
    text-align: center;
    font-size: 13px;
    color: #4C9FFD;
  }
  .header >>> .van-icon-arrow-left{
    color: #2c3e50;
  }
  .collect_listcontent p{
    font-size: 0.9rem;
  }
  .collect_listcontent p:first-child{
    width: 13rem;
  }
  .collect_quan p:nth-child(2){
    margin-right: 0;
  }
  .collect_quan p:nth-child(2) >>> .van-button{
    float: right;
  }
  .collect_listcontent{
    height: 2rem;
  }
  .state_c_yellow >>> .van-icon-underway-o{
      margin-top: -0.4vh;
      margin-right: 0.2vh;
      color: #FD9F4C !important;
  }
  .state_c_green >>> .van-icon-passed{
      margin-top: -0.4vh;
      margin-right: 0.2vh;
      color: #44F8C3 !important;
  }
  .state_c_red >>> .van-icon-close{
      margin-top: -0.4vh;
      margin-right: 0.2vh;
      color: #FF4242 !important;
  }
  .oppo_btn{
    color: #fff;
    background: #4C9FFD;
    border:#4C9FFD;
    width:80vw
  }
</style>
